<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <input name="type" class="form-control" type="hidden" value="1"/>
                        <input name="topDuration" class="form-control" type="hidden" value=""/>
                        <input name="startTime" class="form-control" type="hidden" value=""/>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" style="color:darkred;font-size: 16px"
                                   th:text="${'单价：'+money+'元/次'}"></label>
                            <input type="hidden" id="money" th:value="${money}"/>
                        </div>
                        <input th:if="${type==1}" name="orgId" type="hidden" class="form-control"
                               th:value="${orgRole.id}">
                        <div class="form-group" th:if="${type==0}">
                            <label class="col-sm-3 control-label">岗位机构：</label>
                            <div class="col-sm-8">
                                <select name="orgId" class="form-control">
                                    <option value="">请选择机构</option>
                                    <option th:each="item : ${orgRole}" th:value="${item.id}"
                                            th:text="${item.name}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">购买次数：</label>
                            <div class="col-sm-8">
                                <input id="residues" name="residues" class="form-control" type="number">

                            </div>
                        </div>
                        <div class="form-group" id="payShow" style="display: none">
                            <label class="col-sm-3 control-label">一共需要支付</label>
                            <div class="col-sm-8" id="allMoney" style="font-size: 18px;color: darkred"></div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button type="submit" class="btn btn-primary">立即购买</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="isTop" style="display: none;text-align: center;font-size: 16px">
    <div>订单将在2个小时后关闭，请及时支付</div>
    <div>请使用微信扫一扫完成支付</div>
    <div class="mar20">
        <img src="" id="img" style="width:400px;height:400px">
    </div>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript">
    $().ready(function () {
        var money = $("#money").val();
        $("#residues").change(function () {
            var days = $(this).val();
            $("#allMoney").html(new Number(money * days).toFixed(2) + '元');
            $("#payShow").show()
        });
        validateRule();
    });

    $.validator.setDefaults({
        submitHandler: function () {
            save();
        }
    });

    function save() {
        $.ajax({
            cache: true,
            type: "POST",
            url: "/jzApi/orgOrder/saveOrder",
            data: $('#signupForm').serialize(),// 你的formid
            async: false,
            error: function (request) {
                parent.layer.alert("Connection error");
            },
            success: function (res) {
                $.ajax({
                    type: "POST",
                    url: "/jzApi/orgOrder/wxPay",
                    data: {
                        orderId: res.data.orderId,
                        type: 1,
                        topDuration: '',
                        residues: res.data.residues,
                        body: '购买简历次数费用',
                        trade_type: 'NATIVE'
                    },
                    success: function (data) {
                        if (data.code == 0) {
                            $("#img").attr("src", data.data.wx.data.code_url);
                            layer.open({
                                type: 1,
                                title: '扫码支付',
                                area: ['520px', '520px'],
                                content: $("#isTop") // iframe的url
                            });
                            monitor(res.data.orderId);
                        }

                    }
                })
            }
        });
    }

    var timer = null;

    function monitor(id) {
        timer = window.setInterval(function () {
            queryWxPay(id)
        }, 3000)
    }

    //轮询是否支付成功
    function queryWxPay(id) {
        $.ajax({
            url: "/jzApi/orgOrder/selOrderState",
            data: {
                id: id
            },
            success: function (data) {
                if (data.data == 0) {
                    window.clearInterval(timer);
                    $("#img").attr("src", '/img/wxsuccess.png');
                    layer.closeAll()
                    var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                    parent.layer.close(index);
                }
            }
        });
    }

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                orgId: {
                    required: true
                },
                residues: {
                    required: true,
                    positiveInteger: true
                }
            }
        })
    }
</script>
</body>
</html>
